<template>
	<view>
		<view class="bg-white margin-sm radius padding-lr">
			<u-form labelPosition="left" :model="userInfo" ref="uUserInfo" :rules="rules" :labelWidth="80">
				<u-form-item label="昵称:" prop="nickname">
					<u-input v-model="userInfo.nickname" >
					</u-input>
				</u-form-item>
				<u-form-item label="真实姓名:" prop="realname">
					<u-input v-model="userInfo.realname" >
					</u-input>
				</u-form-item>
				<u-form-item label="手机号码:" prop="phone">
					<u-input v-model="userInfo.phone" >
					</u-input>
				</u-form-item>
				<u-form-item label="头像" prop="avatar">
					<ImageUpload v-model="userInfo.avatar" :limit="1"></ImageUpload>
				</u-form-item>
			</u-form>
			<view class="padding">
				<button class="cu-btn block bg-blue margin-tb-sm lg round" @click="submit()">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	
	import { getUserInfo, saveUserInfo } from '@/api/ums.js'
	export default {
		data() {
			return {
				userInfo: {
					nickname: "",
					
				},
				
				rules: {
					'nickname': {
						type: 'string',
						required: true,
						message: '请填写衣物名称',
						trigger: ['blur', 'change']
					},
				},
				
				picsList: [], // 图片列表
				
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				getUserInfo().then(res => {
					this.userInfo = res.data;
					let urlArr = this.userInfo.avatar.split(",");
					let picsList = [];
					for (var i = 0; i < urlArr.length; i++) {
						picsList.push({url: urlArr[i]})
					}
					this.picsList = picsList;
				})
			},
			
			// 提交表单
			submit() {
				let that = this;
				this.$refs.uUserInfo.validate().then(res => {
					this.$util.$confirm("是否确认提交？").then(res => {
						that.confirm();
					})
				}).catch(err => {
					
				})
			},
			
			// 确认提交
			confirm() {
				
				let userInfo = this.userInfo;
				let picsList = this.picsList;
				let picStrArr = [];
				for (var i = 0; i < picsList.length; i++) {
					picStrArr.push(picsList[i].url);
				}
				userInfo.avatar = picStrArr.toString();
				saveUserInfo(userInfo).then(res => {
					this.$util.$navigateBack(res.msg);
				})
			},
			
			
			
		}
	}
</script>

<style>

</style>
